// 1. 全局引入vue
import Vue from 'vue'
// 2. 整个项目全局样式的重置(项目样式初始化)
import 'normalize.css/normalize.css'
// 3. 全局引入ElementUI
/*
  使用ElementUI中的组件有两种方案:
  1) 完整引入  一次性把ElementUI中所有的组件导入项目
  2) 按需引入  要用到什么组件再去导入什么组件
  区别?
  1) 完整引入在打包时体积是比较大的, 按需引入在打包时体积是比较小的
  2) 完整引入相对按需引入, 会稍微微影响首屏的渲染速度
  如何选择?
  1) 如果是toC项目, 一般采用按需引入, 比如: 网站, 移动端的项目
  2) 如果项目中用到的组件非常多, 基本用的七七八八, 就采用完整引入
  3) 如果是面向内部员工使用的管理系统, 统一采用完整引入即可, 功能是第一位, 体验是第二位
  CDN...
*/
import ElementUI from 'element-ui' // ElementUI插件, 内部继承了所有的Element组件
import 'element-ui/lib/theme-chalk/index.css' // ElementUI的样式文件
// import locale from 'element-ui/lib/locale/lang/en' // 英文语言包
// 4. 全局引入样式文件
// @是别名, 指向项目的src目录
import '@/styles/index.scss' // global css

// 5. 全局引入组件入口文件
import App from './App'
// 6. 全局引入仓库系统(vuex)
import store from './store'
// 7. 全局引入路由系统
import router from './router'
// 8. 全局引入字体文件
import '@/icons' // icon
// 9. 全局引入权限控制文件
import '@/permission' // permission control

// 10. 全局注册ElementUI插件中的所有组件
import i18n from '@/lang'
// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

// 11. 全局自定义指令
import * as directives from '@/directives'
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

// 12. 注册全局组件
import HrComponentUI from '@/components'
Vue.use(HrComponentUI)

// 13. 注册全局的过滤器
import * as filters from '@/filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

// 14. 全局注册打印插件
import Print from 'vue-print-nb'
Vue.use(Print)

// 将App.vue根组件转化成dom元素渲染到指定点(非常重要)
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
